<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
  <head>
    <html:base />
    
    <title>DataTableDDL.jsp</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<link rel="stylesheet" type="text/css" href="../resources/extendCss/data-view.css"/>
	<script type="text/javascript" src="../js/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-all-debug.js"></script>
	<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../js/ComboImage.js"></script>
	<script type="text/javascript" src="testForm.js"></script>
	<style>
		.imageLabel{
			position: absolute;
			z-index: 999;
		}
	</style>
	<script type="text/javascript">
    <!--    
    
    var NewClass=Ext.data.Record.create([
		{name:'title'},
		{name:'author'},
		{name:'totleSize',type:'int'}
	]);
	
	var newClass=new NewClass({
		title:'asdf',
		author:'hf',
		totelSize:12
	});

    
     //数据源为数组的ArrayReader
     function ArrayData()
     {      
        //定义数组
        var arr=[ [ 'Bill', 'Gardener',1],['Ben', 'Horticulturalist',2]];
        var reader = new Ext.data.ArrayReader(
        //以第一个元素做为recordid,这个是必须得要的
            {id: 2}, 
        //定义数组到record的映射关系
        //name:属性名称
        //mapping:映射到数据源的序列，即索引
           [            
            {name: 'name', mapping: 0},//对应字符:Bill
            {name: 'metier', mapping: 1},//对应字符:Gardener
            {name: 'id',mapping:2}//对应数字:1,如果第一个元素定义，则可以省略
           ]
        );                
        //生成元数据
        var data=reader.readRecords(arr);
        var str="";
        for(var i=0;i<data.records.length;i++)
        {              
                    //标识列                        保存的数组被转换为对象                              Json数据        
            str = str.concat(
                             " totalRecords:"+data.totalRecords +//数据总条数
                             " ID:"+data.records[i].id +
                             " Data: .id="+data.records[i].data.id +   
                             " Data: .name="+data.records[i].data.name +   
                             " Data: .metier="+data.records[i].data.metier + 
                             " json:"+data.records[i].json+" ");
        }
        alert(str);           
    }
    
    
    function JsonData()
    {
        var json={ 'results': 2, //设定此对象的总个数,与rows数组长度一致，需要手动设定
                    'rows': [
                        { id: 1, name: 'Bill', metier: 'Gardener' },
                        { id: 2, name: 'Ben', metier: 'Horticulturalist' } 
                            ]
                 };
        var reader=new Ext.data.JsonReader(
            {
            totalProperty: "results",//totalRecords属性由json.results得到(省略此参数也能得到总条数)
            root: "rows",            //构造元数据的数组由json.rows得到
            id: "id"                //id由json.id得到
            },[
            {name:'id',mapping:'id'},
            {name: 'name', mapping: 'name'}, 
            {name: 'metier'}            //如果name与mapping同名,可以省略mapping
            ]
        )
        var data=reader.readRecords(json);       
        var str="";        
        for(var i=0;i<data.records.length;i++)
        {              
                    //标识列                        保存的数组被转换为对象                              Json数据        
            str = str.concat(
                             " totalRecords:"+data.totalRecords +//数据总条数
                             " ID:"+data.records[i].id +
                             " Data: .id="+data.records[i].data.id +   
                             " Data: .name="+data.records[i].data.name +   
                             " Data: .metier="+data.records[i].data.metier + 
                             " json:"+data.records[i].json+" ");
        }
        alert(str); 
    }
    
    function XmlData()
    {
        var str=["<?xml version="+1.0+" encoding="+utf-8+" ?>",
            "<dataset>",
         "<results>2</results>",
         "<row>",
           "<id>1</id>",
           "<name>Bill</name>",
           "<occupation>Gardener</occupation>",
         "</row>",
         "<row>",
           "<id>2</id>",
           "<name>Ben</name>",
           "<occupation>Horticulturalist</occupation>",
         "</row>",
        "</dataset>"].join("");

        //生成xmldocument对象
        var xmlDocument;
         if(Ext.isIE){
            xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument")
            xmlDocument.async=false;
            xmlDocument.resolveExternals = false;
            xmlDocument.loadXML(str) 
        }
        else{
           xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");
        }

        //然后开始和其它两个reader一样的用法,只是这儿换了一种写法,recordtype也可以是一个record对象
        //record对象的属性映射
        var record = Ext.data.Record.create([
          {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
           {name: 'metier',mapping:'occupation'},                // This field will use "occupation" as the mapping.
           {name:'id'}
        ])
        
        
        var reader = new Ext.data.XmlReader({
           totalRecords: "results", 
           record: "row",           //row是节点选择器
           id: "id"                 
        }, record);
        var data=reader.readRecords(xmlDocument);
        
        var outstr="";        
        for(var i=0;i<data.records.length;i++)
        {              
                    //标识列                        保存的数组被转换为对象                              Json数据        
            outstr = outstr.concat(
                             " totalRecords:"+data.totalRecords +//数据总条数
                             " ID:"+data.records[i].id +
                             " Data: .id="+data.records[i].data.id +   
                             " Data: .name="+data.records[i].data.name +   
                             " Data: .metier="+data.records[i].data.metier + 
                             " json:"+data.records[i].json+" ");
        }
        alert(outstr); 
        
    }    
    //-->
    </script>
</head>

<body>
	<div id="mytradionalform"></div>
	<select name="state-orig" id="state">
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
	<option value="ID">Idaho</option>
	<option value="IL">Illinois</option>
	<option value="IN">Indiana</option>
	<option value="IA">Iowa</option>
	<option value="KS">Kansas</option>
	<option value="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
	<option value="MI">Michigan</option>
	<option value="MN">Minnesota</option>
	<option value="MS">Mississippi</option>
	<option value="MO">Missouri</option>
	<option value="MT">Montana</option>
	<option value="NE">Nebraska</option>
	<option value="NV">Nevada</option>
	<option value="NH">New Hampshire</option>
	<option value="NJ">New Jersey</option>
	<option value="NM">New Mexico</option>
	<option value="NY">New York</option>
	<option value="NC">North Carolina</option>
	<option value="ND">North Dakota</option>
	<option value="OK">Oklahoma</option>
	<option value="OR">Oregon</option>
	<option value="PA">Pennsylvania</option>
	<option value="RI">Rhode Island</option>
	<option value="SC">South Carolina</option>
	<option value="SD">South Dakota</option>
	<option value="TN">Tennessee</option>
	<option value="TX">Texas</option>
	<option value="UT">Utah</option>
	<option value="VT">Vermont</option>
	<option value="VA">Virginia</option>
	<option value="WA">Washington</option>
	<option value="WV">West Virginia</option>
	<option value="WI">Wisconsin</option>
	<option value="WY">Wyoming</option>
	</select>
	    <input id="Button1" onclick="ArrayData()" type="button" value="数组源数据" />
    <input id="Button2" onclick="JsonData()" type="button" value="Json源数据" />
    <input id="Button3" onclick="XmlData()" type="button" value="XML源数据" />
</body>
</html:html>
